<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link href="files/bootstrap.css" rel="stylesheet">
		<link href="files/font-awesome.css" rel="stylesheet">
		<link href="files/stylesheet.css" rel="stylesheet">
		<link href="files/skins.css" rel="stylesheet">
		<link href="files/image-cut.css" rel="stylesheet">
	</head>
<body>
	<div class="inner">
		<div class="modal-body">
            <div class="outer-wrapper">
                <div id="picViewOuter" class="pic-view-wrapper">
                    <div id="back" style="cursor: pointer;">
                       <i class="fa fa-picture-o" style="font-size: 150px;"><div style="font-size:30px !important;">点击选择图片</div></i>
                    </div>
                    <table id="picMask" class="hidden">
                        <tbody>
                            <tr>
                                <td id="pP">&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td id="pO">
                                    <div class="pC">
										<!-- 定义右下角的控制点-->
                                        <div id="dm_br" class="dm"></div>
                                        <div class="pI"></div>
                                    </div>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td class="pic-view-height">&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                            </tr>
                        </tbody>
                    </table>
                    <img id="sourceimg">
                </div>
                <div class="ui-slider">
                    <i id="stepDown" class="fa fa-minus-circle fa-lg"></i>
                    <div id="sliderBar" class="ui-slider-bar">
                        <div id="sliderBlock" class="ui-slider-handle" style="left:0%;">
                            <label class="ui-slider-ratio"><small id="sliderHandlerRatio">0%</small></label>
                        </div>
                    </div>
                    <i id="stepUp" class="fa fa-plus-circle fa-lg"></i>
                      &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;
           
                </div>
            </div>
            <span id="s_error" style="color:red; display:none;"></span>
            <input id="imagesrc" accept="image/*" class="hidden" type="file">
            <canvas id="imgcanvas" class="hidden"></canvas>
		</div>
		<!-- /.modal-body -->
		<div class="modal-footer">
			<a class="my-btn btn-flat cancel" data-dismiss="modal" id="cancel">关闭</a> 
			<a class="my-btn btn-flat flat-primary" id="submit">提交</a>
		</div>
		<script src="files/jquery.js"></script>
		<script src="files/image-cut.js"></script>
		<script src="../jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
		    var _bucketType = 4;
			var param = new Object();
			param.fileId = "imagesrc";//必须
			param.cutMinW = 20; // 切片最小宽度
			param.cutMinH = 20; // 切片最小高度
			param.show = false;
			imageSelect(param);
		
	        document.getElementById("cancel").onclick=function(){
	        	//dialog.close();
	        }
            document.getElementById("submit").onclick = function () {
                var result = cutOffImage();
                if (result) {
                    // 继续进行裁剪后的图片引用
                    var imgcanvas = document.getElementById("imgcanvas");
                 	var data = imgcanvas.toDataURL();
				    // 删除字符串前的提示信息 "data:image/png;base64,"
				    var b64 = data.substring(22);
					location.href = "data:image/png;base64,"+b64;
					return;
					/**
					以下方法为UE中使用，方法一为将图片转为base64直接插入到UE中。方法二为先将图片先上传服务器，再插入。
					注意：嵌入UE之前请先引入相关js文件(dialogs/internal.js)
					*/
					//方法一
					//editor.execCommand('inserthtml', '<img width="'+imgcanvas.width+'px" height="'+imgcanvas.height+'px" src="data:image/png;base64,'+ b64 +'"/>');
                    //dialog.close();
                    //方法二
                    //if (!!b64) {
			        //    var options = {
			        //        timeout:100000,
			        //        onsuccess:function (xhr) {
			        //          var responseObj;
			        //           responseObj = eval("(" + xhr.responseText + ")");
			        //           if (responseObj.state == "SUCCESS") {
			        //               var imgObj = {},
			        //               url = editor.options.scrawlUrlPrefix + responseObj.url;
			        //               imgObj.src = url;
			        //               imgObj._src = url;
			        //               imgObj.alt = responseObj.original || '';
			        //               editor.execCommand("insertImage", imgObj);
			       //                dialog.close();
			       //            } else {
			       //                alert(responseObj.state);
			       //            }
			       //         },
			       //         onerror:function () {
			       //             alert(lang.imageError);
			       //             dialog.close();
			       //         }
			       //     };
			       //     options[editor.getOpt('scrawlFieldName')] = b64;
			
			       //    var actionUrl = editor.getActionUrl(editor.getOpt('scrawlActionName')),
			       //         params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
			       //         url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params);
			       //     ajax.request(url, options);
			       // }
                } else {
                    var s_error=  document.getElementById("s_error");
                    s_error.innerHTML="请点击右侧“选择图片”, 选择一张图片";
                    s_error.style.display="block";
                }
            };
		</script>
	</div>

</body></html>